<template>

  <div class="feedback-form">
    <h2>读者意见反馈</h2>
    <div v-if="message" :class="['alert', messageType === 'success' ? 'alert-success' : 'alert-error']">
      <div class="alert-icon">
        <svg v-if="messageType === 'success'" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
             fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
          <path
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
        </svg>
      </div>

      <div class="alert-content">
        <h4>{{ messageType === 'success' ? '提交成功！' : '操作失败' }}</h4>
        <p>{{ message }}</p>
        <p v-if="submittedId">您的反馈ID是: <strong>{{ submittedId }}</strong> (请妥善保存用于查询进度)</p>
      </div>
    </div>
    <div v-if="!readerId" class="error-message">
      <p>警告：未从URL中获取到读者Id，只能进行匿名反馈。</p>
    </div>

    <form @submit.prevent="requestSmsCode">
      <div>
        <label>
          <input type="checkbox" v-model="form.is_anonymous"/>
          匿名提交
        </label>
      </div>

      <div v-if="!form.is_anonymous && readerId">
        <p>欢迎中图读者。请填写您对我馆的意见：</p>
        <div>
          <label for="full_name">您的姓名 (必填):</label>
          <input type="text" id="full_name" v-model="form.full_name" required/>
        </div>
      </div>
      <div>
        <label for="phone_number">您的手机号 (必填):</label>
        <input type="tel" id="phone_number" v-model="form.phone_number" required/>
      </div>


      <div>
        <label for="feedback_content">意见反馈 (必填):</label>
        <textarea id="feedback_content" v-model="form.feedback_content" required></textarea>
      </div>
      <div>
        <label for="location">发生地点 (必填):</label>
        <input type="text" id="location" v-model="form.location" required/>
      </div>

      <div>
        <label for="image">上传图片 (可选):</label>
        <input type="file" id="image" @change="handleFileChange" accept="image/png, image/jpeg"/>
      </div>

      <button type="submit" :disabled="submitting">
        {{ submitting ? '提交中...' : '提交意见' }}
      </button>
    </form>
    <div v-if="showVerificationModal" class="modal-overlay">
      <div class="modal-content">
        <h4>请输入手机验证码</h4>
        <p>验证码已发送至手机：<strong>{{ form.phone_number }}</strong></p>
        <input
            type="text"
            v-model="verificationCode"
            placeholder="6位验证码"
            maxlength="6"
        />
        <div class="modal-actions">
          <button @click="submitFullForm" :disabled="isFinalSubmitting">
            {{ isFinalSubmitting ? '正在提交...' : '确认并提交反馈' }}
          </button>
          <button @click="showVerificationModal = false" class="btn-cancel">取消</button>
        </div>
        <p v-if="modalError" class="error-message">{{ modalError }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/services/api'; // 引入 API 服务
import {inject} from 'vue'; // 引入 inject
export default {
  name: 'FeedbackForm',
  setup() {
    // 使用 provide 时用的同一个 key 来注入数据
    // provide/inject 必须在 setup 函数中使用
    const readerId = inject('readerId');

    // 现在就可以在 setup 函数的作用域内使用 readerId 了
    // readerId 是一个 ref 对象，需要通过 .value 来访问它的值
    console.log('注入的读者 ID:', readerId.value);

    // ... 其他 setup 逻辑 ...

    return {
      readerId // 将它返回，就可以在模板中使用了
    };
  },
  data() {
    return {
      form: {
        is_anonymous: false, // 默认不匿名
        full_name: '',
        phone_number: '',
        feedback_content: '',
        location: '',
      },
      selectedFile: null,
      submitting: false,

      // --- 控制提示框的 data 属性 ---
      message: '', // 提示信息的主体内容
      messageType: '', // 'success' 或 'error'，用于决定样式
      submittedId: null, // 用于存放成功提交后返回的ID

      // --- 新增的状态 ---
      showVerificationModal: false,
      verificationCode: '',
      isFinalSubmitting: false, // 用于最终提交按钮的加载状态
      modalError: '', // 用于在弹窗中显示错误
    };
  },
  watch: {
    // 监听匿名选项的变化，如果选择匿名，则清空姓名电话，反之则不清空
    'form.is_anonymous'(newValue) {
      if (newValue) {
        this.form.full_name = '';
        this.form.phone_number = '';
      }
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0] || null;
    },
    // 1. 新增一个专门用于重置表单状态的方法
    resetForm() {
      // 将 this.form 重新设置为包含所有字段的初始状态
      // 确保 is_anonymous 被重置为布尔值 false
      this.form = {
        is_anonymous: false,
        full_name: '',
        phone_number: '',
        feedback_content: '',
        location: '',
      };

      // 同时重置文件相关的状态
      this.selectedFile = null;
      this.selectedFileName = '未选择文件';
      if (this.$refs.fileInput) {
        // 清空文件选择框中显示的文件名
        this.$refs.fileInput.value = '';
      }
    },
    async handleSubmit() {
      // 如果是实名提交，但没有 readerId，则阻止提交
      if (!this.form.is_anonymous && !this.readerId) {
        alert("错误：实名反馈需要有效的读者标识 (readerId)，请检查URL。");
        return;
      }

      this.submitting = true;
      this.message = '';
      this.submittedId = null;
      // 1. 先创建一个包含所有文本数据的普通 JavaScript 对象
      const payload = {
        is_anonymous: this.form.is_anonymous,
        feedback_content: this.form.feedback_content,
        location: this.form.location,
        card_number: this.form.is_anonymous ? null : this.readerId,
        full_name: this.form.is_anonymous ? null : this.form.full_name,
        phone_number: this.form.is_anonymous ? null : this.form.phone_number,
      };

      // 2. 创建一个 FormData 对象
      const formData = new FormData();

      // 3. 将 payload 对象转换为 JSON 字符串，并添加到 FormData 中
      //    键名 "payload" 必须与后端 Form(..., alias="payload") 中的别名匹配
      formData.append('payload', JSON.stringify(payload));

      // 4. 如果有文件，将文件对象也添加到 FormData 中
      //    键名 "image" 必须与后端的 image: UploadFile 参数名匹配
      if (this.selectedFile) {
        formData.append('image', this.selectedFile);
      }


      try {
        const response = await api.submitFeedback(formData);
        // 调用 resetForm() 方法来安全地清空所有状态
        this.resetForm();
        this.messageType = 'success';
        this.message = '感谢您的宝贵意见，我们会尽快处理。';
        this.submittedId = response.data.feedback_id;
      } catch (error) {
        // --- API 调用失败后，设置错误消息 ---
        this.messageType = 'error';
        this.submittedId = null;
        this.message = error.response?.data?.detail || '发生未知错误，请稍后重试。';
        console.error("提交失败:", error);
      } finally {
        this.submitting = false;
      }
    },
    // 步骤一：请求发送验证码
    async requestSmsCode() {
      if (!this.form.phone_number) {
        alert('请填写您的手机号码！');
        return;
      }
      this.submitting = true;
      try {
        // 在 api.js 中添加一个新的 sendSmsCode 方法
        await api.sendSmsCode({phone_number: this.form.phone_number});
        this.showVerificationModal = true; // 发送成功，显示弹窗
        this.modalError = '';
      } catch (error) {
        console.error("发送验证码失败:", error);
        alert(error.response?.data?.detail || "发送验证码失败");
      } finally {
        this.submitting = false;
      }
    },
    // 步骤二：提交包含验证码的完整表单
    async submitFullForm() {
      this.isFinalSubmitting = true;
      this.modalError = '';
      const payload = {
        // 来自表单的 checkbox
        is_anonymous: this.form.is_anonymous,

        // 来自表单的文本框
        feedback_content: this.form.feedback_content,
        location: this.form.location,

        // 来自 props 的数据（如果是实名提交）
        card_number: this.form.is_anonymous ? null : this.readerId,

        // 来自表单的读者信息（如果是实名提交）
        full_name: this.form.is_anonymous ? null : this.form.full_name,
        phone_number: this.form.is_anonymous ? null : this.form.phone_number,

        // 来自弹窗输入框的数据
        verification_code: this.verificationCode
      };

      const formData = new FormData();
      formData.append('payload', JSON.stringify(payload));
      if (this.selectedFile) {
        formData.append('image', this.selectedFile);
      }

      try {
        await api.submitFeedback(formData); // 调用我们修改过的最终提交接口
        alert('反馈提交成功！');
        this.showVerificationModal = false; // 关闭弹窗
        this.resetForm(); // 重置表单
      } catch (error) {
        console.error("最终提交失败:", error);
        // 在弹窗中显示错误，而不是用 alert
        this.modalError = error.response?.data?.detail || "提交失败，请检查验证码或网络";
      } finally {
        this.isFinalSubmitting = false;
      }
    },
  },
};
</script>

<style scoped>

.feedback-form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.feedback-form div {
  margin-bottom: 15px;
}

.feedback-form label {
  display: block;
  margin-bottom: 5px;
}

.feedback-form input[type="text"],
.feedback-form input[type="tel"],
.feedback-form textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.feedback-form button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.feedback-form button:disabled {
  background-color: #ccc;
}

.success-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #e6ffed;
  border: 1px solid #b7ebc0;
  color: #007020;
  border-radius: 4px;
}

.error-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #ffe6e6;
  border: 1px solid #ffb3b3;
  color: #990000;
  border-radius: 4px;
}

/* src/components/FeedbackForm.vue 的 <style scoped> 部分 */

.alert {
  display: flex;
  align-items: flex-start; /* 图标和文字顶部对齐 */
  padding: 16px;
  margin-top: 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  gap: 12px;
}

.alert-success {
  background-color: #e6ffed; /* 淡绿色背景 */
  border-color: #b7ebc0;
}

.alert-error {
  background-color: #ffe6e6; /* 淡红色背景 */
  border-color: #ffb3b3;
}

.alert-icon {
  flex-shrink: 0; /* 防止图标被压缩 */
}

.alert-success .alert-icon {
  color: #00a843; /* 绿色图标 */
}

.alert-error .alert-icon {
  color: #d90000; /* 红色图标 */
}

.alert-content h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.alert-success .alert-content h4 {
  color: #007020;
}

.alert-error .alert-content h4 {
  color: #990000;
}

.alert-content p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}

.alert-content p strong {
  font-weight: 600;
  color: #000;
}
</style>